<template>
  <div  >
    <img class="top-bg" src="../../../public/icons/bg2x.png" alt="">
    <div class="total"><div class="total-label">测评结果</div> <div class="total-score"><span >{{totalScore}} </span>分 </div></div>
    <div class="grids">
      <div  v-for="(row,index) in grids" :key="index" class="row" >
        <div v-for="col in row" :key="col.url"  class="col">
          <template>
            <img referrerpolicy="no-referrer" :src="col.url">
            <div >
              <span class="label">{{col.label}}</span>
              <div class="bt-box">
                <span class="score">{{col.score}}</span>
                <span>分</span>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="flex bg-white card">
      <div
        class="font-base text-box"
      >评分结论: {{content}} </div>
      <div class="info">
          <van-icon name="../../icons/warning@2x.png" size="15px"/>
          <span class="info-text">如果您还想让您文书变得更加完美，欢迎点击“外教Final Check”按钮，申请圈经过多年积累，有数百位经验丰富的外教Counselor，从Native Speaker的角度，为您的文书做最后的润色定稿，帮您打造完美文书。</span>
      </div>
      <van-button  class="btn "  color="#0B3E98" @click="getCqReport">获取测试报告</van-button>
      <van-button  class="btn "  color="#0B3E98" @click="showInfoForm">外教Final Check</van-button>
    </div>
    <div v-if="info_form_showed&&!userId" class="bg-white card">
      <div class="field">
        <label>邮箱</label>
        <input v-model="user.email" type="email" name="email" id="email" placeholder="请输入您的邮箱"/>
      </div>
      <div class="field" style="margin-top:15px;">
        <label>微信号</label>
        <input v-model="user.wechat" type="email" name="wechatId" id="wechatId" placeholder="请输入您的微信号"/>
      </div>
       <van-button class="btn btn-coach" plain hairline color="#0B3E98" @click="toPay">找外教Final Check</van-button>
    </div>
    <div v-if="paied" class="bg-white card blue-border">
      <div class="paied-info">
        支付成功后24小时内，<{{user.email}}>将收到老师的邮件，请注意查收
      </div>
    </div>
    <van-popup v-model="cq_show" closeable close-icon-position="top-right" >
      <div class="cqcode">
        <div class="cqcode-label">编号</div>
        <span class="id">{{reportId}}</span>
        <img
          class="cqcode-img"
          referrerpolicy="no-referrer"
          src="https://aiact-1304125770.cos.ap-shanghai.myqcloud.com/icon/qrcode_chen.jpeg"
          alt=""
        >
        <div class="detail">扫码添加顾问老师微信，提供上方编号就可以免费获取更加详细的测评报告啦</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import $api from '../../api/systemApi'
export default {
  data() {
    return {
      grids: [
        [
          {
            url:
              'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6fa14b6bf80804d210133487231906461668c77f1099e12144ebc495f1c4810e',
            label: '内容',
            score: 83.82
          },
          {
            url:
              'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng562fb2835ce33294a6859e5a97034a44c44a01ff0cd1e2e7ff147340662bc191',
            label: '句子',
            score: 83.82
          }
        ],
        [
          {
            url:
              'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng562fb2835ce33294a6859e5a97034a44c44a01ff0cd1e2e7ff147340662bc191',
            label: '篇章结构',
            score: 83.82
          },
          {
            url:
              'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9aafd8903ad3211c8fb6e09873427a196e0fb54a69cf200803328e0e3dd85125',
            label: '词汇',
            score: 83.82
          }
        ]
      ],
      info_form_showed:false,
      paied:false,
      content:'',
      cq_show:false,
      user:{
        wechat:'',
        email:''
      },
      totalScore:0,
      evalRes:{},
      reportId:'',
      userId:''
    }
  },
  methods: {
    showInfoForm(){
      // if(!this.isPaied)  this.info_form_showed = false;
       this.info_form_showed = true;
    },
    toPay(){
      if(this.user.email&&this.user.wechat){
         this.register().then(res=>{
           this.saveCnt().then((bizzId)=>{
            $api.getVip(1).then(res=>{
              this.$router.push({name:'payment',params:{items:res.data,userId:this.userId,bizzId}})
            }).catch(err=>{
              debugger
            })
           })
         })
      }
      else this.$toast("请输入正确的邮箱与微信号")

    },
    register(){
      let formdata = new FormData()
      formdata.append('email',this.user.email)
      formdata.append('weixin',this.user.wechat)
      return $api.register(formdata).then(res=>{
         this.userId = res.data
      })
    },
    getCqReport(){
      this.cq_show = true
    },
     saveCnt() {
     let formdata = new FormData()
      formdata.append('attachCnt',this.content)
      formdata.append('userId',this.userId)
      return $api.savews(formdata).then((res)=>{
        return res.data
      })
    },
  },
  beforeRouteEnter (to, from, next) {
     next(vm => {
    // 通过 `vm` 访问组件实例
      if(to.query.isPaied) vm.paied = Boolean(to.query.isPaied)
      if(to.params){
        if(to.params.content) vm.content = to.params.content
        if(to.params.id) vm.reportId = to.params.id
        if(to.params.payload){
          vm.evalRes = JSON.parse(to.params.payload)
          let {report:{scoreCat,score}} = vm.evalRes
          vm.grids[0][0].score = scoreCat.content.score
          vm.grids[0][1].score = scoreCat.sentences.score
          vm.grids[1][0].score = scoreCat.structure.score
          vm.grids[1][1].score = scoreCat.words.score
          vm.totalScore = score
        }
      }
    })
  }
}
</script>

<style scoped>
.cqcode{
  width: 600px;
  height: 636px;
}
.cqcode-img{
  width: 300px;
  height: 300px;
  margin-top: 30px;
}
.cqcode-label{
  text-align: center;
  width: 60px;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 42px;
  margin-top: 50px;
}
.detail{
  width: 500px;
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 33px;
  margin-top: 40px;
}
.id{
  font-size: 50px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #0B409C;
  line-height: 58px;
  margin-top:10px;
}
.paied-info{
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0B409C;
  line-height: 33px;
}
.btn-coach{
  border-radius: 20px;
}
.van-icon>img{
  margin-top: 70px;
}
.info{
  padding: 20px;
  box-sizing: border-box;
}
.info-text{
  margin-left: 20px;
  width: 540px;
  /* height: 66px; */
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 33px;
}
.btn{
  margin-top: 30px;
}
.total{
  margin: 73px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.total-label{
 width: 120px;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 42px;
  opacity: .6;
}
.total-score{
  z-index: 1000;
  margin-top: 20px;
  font-size: 30px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 42px;
}
.total-score>span{
  width: 143px;
  height: 77px;
  font-size: 66px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 77px;
  margin-right: 18px;
}
.top-bg{
  width: 750px;
  height: 370px;
  background: #F5F5F5;
  position: absolute;
  top: 80px;
  left: 0;
  /* z-index: -999; */
}
.bt-box{
  margin-top: 10px;
}
.label{
  width: 60px;
  height: 42px;
  font-size: 30px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 42px;
}
.score{
  width: 109px;
  height: 45px;
  font-size: 32px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #0B409C;
  line-height: 37px;
}
.grids {
  width: 690px;
  height: 320px;
  background: #ffffff;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  margin: 41px  30px;
  padding: 32px 0;
  box-sizing: border-box;
  position: relative;
}
.grids::after{
  content: ' ';
  height: calc( 100% - 64px);
  width: 1px;
  position: absolute;
  background: #D9D9D9;

  left: 50%;
  top: 32px;
}
.grids::before{
  content: ' ';
  height:1px;
  width: calc(100% - 80px);
  position: absolute;
  background: #D9D9D9;
  /* top:50%; */
  top:145px;
  left: 40px;
}
.col>img{
  width: 44px;
  height: 44px;
}
.col>img{
  margin-top: 27px;
}
.grids>.row{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.row:last-child{
  margin-top:31px;
}
.row>.col{
  flex-grow: 1;
  /* margin-left: 71px; */
  padding-left: 71px;
  width: 50%;
}
.col>img{
  float: left;
  margin-right:50px;
}

</style>
